<template>
  <div class="app-container-item">
    <div class="form-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-flex">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="客户头像">
              <picupload
                width="150"
                height="200"
                title="业主头像"
                httpRequest="/common/minioUpload"
                :src.sync="form.customHeadImg"></picupload>
            </el-form-item>
          </el-col>
          <el-col :span="16" :xs="24">
            <el-row>
              <el-col :span="24" :xs="24">
                <el-form-item label="客户类型" prop="customType">
                  <el-radio-group v-model="form.customType" :disabled="disabled">
                    <el-radio
                      v-for="item in dict.custom_type"
                      :key="item.dictValue"
                      :label="item.dictValue">
                      {{item.dictLabel}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="所属小区" prop="communityName">
                  <el-input v-model="form.communityName" placeholder="请输入所属小区" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24" v-if="form.customType=='002'">
                <el-form-item label="公司名称" prop="corporateName">
                  <el-input v-model="form.corporateName" placeholder="请输入公司名称" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item :label="form.customType=='001'?'客户名称':'法人名称'" prop="customName">
                  <el-input v-model="form.customName" :placeholder="`请输入${form.customType=='001'?'客户名称':'法人名称'}`"
                            :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="手机号码" prop="cellPhoneNumber">
                  <el-input v-model="form.cellPhoneNumber" placeholder="请输入手机号码" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24" v-if="form.customType=='002'">
                <el-form-item label="联系地址" prop="contactAddress">
                  <el-input v-model="form.contactAddress" placeholder="请输入联系地址" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24" v-if="form.customType=='002'">
                <el-form-item label="联系人" prop="contactAddress">
                  <el-input v-model="form.contactAddress" placeholder="请输入联系人" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="身份证号" prop="idCard" v-if="form.customType=='001'">
                  <el-input v-model="form.idCard" placeholder="请输入身份证号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="性别" prop="sex" v-if="form.customType=='001'">
                  <el-radio-group v-model="form.sex" :disabled="disabled">
                    <el-radio
                      v-for="item in dict.sys_user_sex"
                      :key="item.dictValue"
                      :label="item.dictValue">
                      {{item.dictLabel}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="出生日期" prop="birthDate" v-if="form.customType=='001'">
                  <el-date-picker clearable size="small" :disabled="disabled"
                                  v-model="form.birthDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择出生日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialog-footer" style="text-align: center;" v-if="roomForm.ownerId">
      <el-button type="primary" plain @click="submitForm" v-if="this.state!='10001'" v-hasPermi="['waitress:customInfo:edit']">保 存</el-button>
<!--      <el-button type="primary" plain @click="$refs.familyRefs.show({roomId:roomForm.id,customId: roomForm.ownerId})">业主成员管理</el-button>-->
    </div>
    <family-list ref="familyRefs" />
  </div>
</template>

<script>
  import {getCustomInfo, addCustomInfo, updateCustomInfo} from "@/api/waitress/customInfo";
  import { getRoom } from "@/api/property/room";
  import FamilyList from "./familyList"

  export default {
    name: "lesseeForm",
    dicts: ['custom_type', 'sys_user_sex'],
    components:{ FamilyList },
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          customName: [
            {required: true, message: "客户名称不能为空", trigger: "blur"}
          ],
          cellPhoneNumber: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          idCard: [
            {required: false, validator: this.checkIDCard, trigger: 'blur'}
          ]
        },
        roomForm:{},
        state:null
      };
    },
    watch: {
      currentNode(v) {
        this.initForm()
      }
    },
    created() {
      this.initForm()
    },
    methods: {
      initForm() {
        this.reset();
        if (this.currentNode.modelType == 'room') {
          getRoom(this.currentNode.id).then(response => {
            this.roomForm = response.data;
            this.state = response.data.state;
            if (response.data.state=='10003'){
              getCustomInfo(this.roomForm.ownerId).then(res=>{
                this.form = Object.assign(this.form,res.data)
              })
            }
          });
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          customId: null,
          deptId: null,
          communityId: null,
          customName: null,
          customHeadImg: null,
          cellPhoneNumber: null,
          idCard: null,
          customType: '001', //业主类型
          sex: '2', //业主性别
          birthDate: null,
          customNumber: null,
          corporateName: null,
          contactAddress: null,
          linkman: null,
          ancestors: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          communityName: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.customId != null) {
              updateCustomInfo(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addCustomInfo(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
      }
    },
    props: {
      currentNode: {
        type: Object,
        default: () => {
        }
      },
    }
  };
</script>
